<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品参数</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-alert
        title="注意: 只允许为第三级分类设置相关参数"
        type="warning"
        :closable="false"
        show-icon
      >
      </el-alert>
      <el-row class="category">
        <span>选择商品分类</span>
        <el-cascader
          v-model="selectedCateIds"
          :options="categoryList"
          :props="{
            expandTrigger: 'hover',
            value: 'id',
            label: 'name',
            children: 'children',
          }"
          @change="handleChange"
        ></el-cascader>
      </el-row>

      <el-tabs v-model="activeName" @tab-click="handleTabClick">
        <el-tab-pane label="动态参数" name="first">
          <el-button
            type="primary"
            icon="el-icon-plus"
            :disabled="isBtnDisabled"
            >添加属性</el-button
          ></el-tab-pane
        >
        <el-tab-pane label="静态属性" name="second">
          <el-button
            type="primary"
            icon="el-icon-plus"
            :disabled="isBtnDisabled"
            >添加属性</el-button
          ></el-tab-pane
        >
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
export default {
  data () {
    return {
      activeName: 'first',
      categoryList: [],
      selectedCateIds: []
    }
  },
  created () {
    this.getCateList()
  },
  computed: {
    isBtnDisabled () {
      if (this.selectedCateIds.length !== 3) {
        return true
      }
      return false
    },
    lastCateId () {
      if (this.selectedCateIds.length === 3) {
        return this.selectedCateIds[2]
      } else {
        return null
      }
    }

  },
  methods: {
    async getCateList () {
      const { data: res } = await this.$http.get('api/goods/cate?type=3')
      this.categoryList = res.data
    },
    handleChange () {
      if (this.selectedCateIds.length !== 3) {
        this.selectedCateIds = [];
        return;
      }
      console.log(this.selectedCateIds)
    },
    handleTabClick () {
      console.log(this.activeName)
    }
  }
}
</script>

<style lang="less" scoped>
.category {
  margin: 15px 0;
}
</style>